// scss-lint:disable VendorPrefixes

// Shortcut for text color of hover action
@mixin hover($color: false) {
  &:hover {
    @if $color {
      color: $color;
    } @else {
      @content;
    }
  }
}

// Remove all list properties
@mixin list--none {
  margin: 0;
  padding: 0;
  list-style: none;
}

// Make a triangle (taken from Bourbon)
@mixin triangle($direction: top, $color: $c-black, $size: 30px, $shadow: false) {
  position: relative;
  background: $color;

  &:after {
    border: solid transparent;
    content: ' ';
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
    border-color: rgba($c-black, 0);
    border-width: $size;

    @if ($direction == top) {
      bottom: 100%;
      left: 7%;
      margin-left: $size;
      border-bottom-color: $color;
    }

    @if ($direction == bottom) {
      top: 100%;
      left: 50%;
      border-top-color: $color;
      margin-left: negate($size);
      // border-width: $size;
    }

    @if ($direction == left) {
      top: 20%;
      left: 0;
      margin-left: -$size * 2;
      border-right-color: $color;
    }

    @if ($direction == right) {
      top: 20%;
      left: auto;
      right: 0;
      margin-right: -$size * 2;
      border-left-color: $color;
    }
  }

  @if ($shadow) {
    &:before {
      border: solid transparent;
      content: ' ';
      height: 0;
      width: 0;
      position: absolute;
      pointer-events: none;
      border-color: rgba($c-black, 0);
      border-width: $size;
      z-index: 2;

      @if ($direction == left) {
        top: 20%;
        left: 0;
        margin-left: -(($size * 2) + 1);
        border-right-color: $shadow;
      }

      @if ($direction == top) {
        bottom: 100%;
        left: 7%;
        margin-left: $size;
        border-bottom-color: $shadow;
      }
    }

    &:after {
      z-index: 3;
    }
  }
}

// Clearfix
@mixin clearfix {
  &:before,
  &:after {
    content: ' ';
    display: table;
  }

  &:after {
    clear: both;
  }
}

// Throw it your list of css classes without periods and it'll return a z-index or nothing at all if the parent selector is not in the list
// @example
//   $list: (
//     '.modal-bg',
//     '.modal-content'
//   );
//
//   .modal-bg {
//     @include stack($list);
//   }
@mixin stack($list, $element:false) {
  $z: false;

  @if $element {
    $z: z($list, $element);
  } @else {
    $parents: &;
    $target: length($parents);
    $element: nth($parents, $target);
    $z: z($list, inspect($element));
  }

  @if $z {
    z-index: $z;
  }
}

// Media Query Fun
// http://www.sitepoint.com/managing-responsive-breakpoints-sass/
@mixin bp($name, $breakpoint_list: $breakpoints) {
  // If the key exists in the map
  @if map-has-key($breakpoint_list, $name) {
    // Prints a media query based on the value
    @media #{inspect(map-get($breakpoint_list, $name))} {
      @content;
    }
  } @else {
    // If the key doesn't exist in the map
    @warn "Unfortunately, no value with #{$name} could be retrieved from `$breakpoint`. "
        + 'Please make sure it is defined in `$breakpoints` map.';
  }
}

// Style placeholder text at the root level or on an element
@mixin placeholder {

  @if & {

    &::-webkit-input-placeholder {
      @content;
    }

    &::-moz-placeholder {
      @content;
    }

    &:-ms-input-placeholder {
      @content;
    }

  } @else {

    // scss-lint:disable QualifyingElement
    input[placeholder],
    textarea[placeholder] {
      @content;
    }

    ::-moz-placeholder {
      @content;
    }

    :-moz-placeholder {
      @content;
    }

    ::-webkit-input-placeholder {
      @content;
    }

    :-ms-input-placeholder {
      @content;
    }

  }
}

// IE
@mixin ie($version: '') {
  @if & {
    .ie#{unquote($version)} & {
      @content;
    }
  } @else {
    .ie#{unquote($version)} {
      @content;
    }
  }
}

// Touch and mobile
@mixin touch {
  @if & {
    .touch & {
      @content;
    }
  } @else {
    .touch {
      @content;
    }
  }
}

// Include the icomoon font properties
@mixin icomoon {
  font-family: 'icomoon';
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;

  // Better Font Rendering
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

// Vertically center element
// http://zerosixthree.se/vertical-align-anything-with-just-3-lines-of-css/
@mixin vertical-center {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

/// Makes an item relatively sized according
/// to a ratio and the screen size
/// @param {number} $width
/// @param {number} $height
/// @example scss - aspect-ratio mixin
///  @include aspect-ratio(1, 0.8);
@mixin aspect-ratio($x, $y) {

  @if (type-of($x) != number) or
      (type-of($y) != number) {
    @error 'You need to enter a number as the second and third paramaters.'
  }

  overflow: hidden;

  &:before {
    display: block;
    content: "";
    width: 100%;
    padding-top: ($y / $x) * 100%;
  }

  > *:first-child {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
  }
}
